<template>
    <div class="NumbeRFMaintenMZYPGL">
        <div class="pubBig standard ">
            <div class="h0">
                <p class="lt">药品管理</p>
            </div>

            <div class="dRightMain">
                <el-row>
                    <el-col :span="24">
                        <div class="cardP">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>药品列表</span>
                                    <el-button style="float: right;" @click="showDialog('showTJYP')" type="success">添加药品
                                    </el-button>
                                </div>
                                <div class="cardC" style="height: 500px;overflow-y: auto">
                                    <el-row>
                                        <el-col :span="24">
                                            <div class="grid-content bg-purple ">
                                                <div class="fjtable">
                                                    <el-row>

                                                        <el-col :span="8">
                                                            <div class="grid-content bg-purple div_P">
                                                                <div class="form-group">
                                                                    <p class="selectTime">
                                                                        <label>药品名称/编码:</label>
                                                                        <input type="text" class="form-control"
                                                                               v-model="DrugObj.Name"
                                                                               placeholder="">
                                                                        </input>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="4">
                                                            <div class="grid-content bg-purple div_P">
                                                                <div class="form-group">
                                                                    <p class="selectTime">
                                                                        <el-button type="primary">查询</el-button>

                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <el-table
                                                            :data="YPList"
                                                            height="398"
                                                            border
                                                            style="width: 100%">
                                                        <el-table-column
                                                                fixed
                                                                prop="Name"
                                                                label="药品名称"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="OEM"
                                                                label="厂家"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="ApprovalNum"
                                                                label="批准文号"

                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Describe"
                                                                label="药品规格"

                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Unit"
                                                                label="单位"
                                                                width="60"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Usage"
                                                                label="用法"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Frequency"
                                                                label="频率"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Dose"
                                                                label="单量"
                                                                width="60"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="DoseUnit"
                                                                label="剂量单位"
                                                                width="80"
                                                        >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="Price"
                                                                label="售价"
                                                                width="60"
                                                        >
                                                        </el-table-column>


                                                        <el-table-column
                                                                fixed="right"
                                                                label="操作"
                                                                width="100">
                                                            <template slot-scope="scope">
                                                                <el-button @click="handleClickInforItem(scope.row)"
                                                                           type="text" size="small">删除
                                                                </el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                    <el-pagination
                                                            background
                                                            layout="prev, pager, next"
                                                            :page-size="10"
                                                            @current-change="handleCurrentChange"
                                                            :total="total">
                                                    </el-pagination>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>

                                </div>
                            </el-card>
                        </div>
                    </el-col>

                </el-row>


            </div>


            <!--弹框   添加药品-->
            <div class="blackBg hyCZBg" v-if="isShow=='showTJYP'">
                <div class="panel-default column2">
                    <em class="closes" @click="showDialog('')">×</em>
                    <div class="panel-heading">添加药品</div>
                    <div class="pucLabel">
                        <div class="form-group clearfix">
                            <p>
                                <label>药品名称：</label>
                                <input type="text" class="form-control"
                                       v-model="DrugObj.Name"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>生产厂家：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.OEM"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>批准文号：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.ApprovalNum"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>药品规格：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Describe"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>用法：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Usage"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>频率：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Frequency"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>单量：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Dose"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>剂量单位：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.DoseUnit"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>单位：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Unit"
                                       placeholder="必填">
                                </input>
                            </p>
                            <p>
                                <label>单价：</label>

                                <input type="text" class="form-control"
                                       v-model="DrugObj.Price"
                                       placeholder="必填">
                                </input>
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="showDialog('')">关闭</button>
                        <button type="button" class="btn btn-primary" @click=" addDrug()">保存</button>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>
<script>
    export default {
        name: "Bedinformation",
        data() {
            return {
                msg: "SystemManagement 下的 Bedinformation",
                /*************************检验申请**********************************/
                isShow: "",
                zzjgList: [],
                LoginInfor: {
                    SectionName: "",
                    UserName: "",
                },
                DrugObj: {
                 Id: 0,
                 Name: "",
                 OEM: "",
                 ApprovalNum: "",
                 Describe: "",
                 Usage: "",
                 Frequency: "",
                 Unit: "",
                 Dose: "",
                 DoseUnit: "",
                 Price: "",
                 Status: 0,
                 InPutTime: "2020-02-09T01:01:54.408Z",
                 InPutUserId: 0,
                 RelationId: 0
                },
                YPList:[],
            };
        },
        methods: {
            handleClickInforItem(row) {
                console.log("删除的药品");
                console.log(row);
               this. deleteDrug(row.Id)
            },
            showDialog(show) {
                this.isShow = show;
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            /*************************************************/
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getJYInforObj.page = val;
                this.getReferralList()
            },

            handleClick(tab, event) {
                console.log(tab, event);
                this.getReferralList()
            },
            handleClickJCItem(row) {
                console.log(row);
                // this.getReferralInfor(row.Id)
            },
            addDrug() {
                var params = this.DrugObj;
               // POST /api/Drug/Create
                this.$post("Drug/Create", params)
                    .then(res => {
                        console.log("药品新增结果");
                        console.log(res);
                        this.showDialog('')
                        this. getDrugList();
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            deleteDrug(Id) {
                var params = {
                    Id:Id
                };
                // POST /api/Drug/Delete
                this.$post("Drug/Delete", params)
                    .then(res => {
                        console.log("药品删除结果");
                        console.log(res);
                        this. getDrugList();
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            getDrugList() {
                this.YPList = [];
                var params = {
                    name: ""
                };
                //GET /api/Drug/GetList
                this.$get("Drug/GetList", params)
                    .then(res => {
                        console.log("药品字典列表查询结果");
                        console.log(res);
                        this.YPList = res.data;


                    })
                    .catch(err => {
                        console.log(err);
                    });
            },

            getZZJGList() {
                this.zzjgList = [];
                var params = {
                    name: ""
                };
                this.$get("Hospital/GetList", params)
                    .then(res => {
                        //this.total = res.data.totalCount;
                        this.zzjgList = res.data;

                        console.log("组织机构列表查询结果");
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if(this.msg.Token!=null&&this.msg.Token!=""){
                console.log("设置Token")
                this.$setToken(this.msg.Token)
                this.$setItemUrl(this.msg.ItemIP)
            }else{
                console.log("Token为空")
            }
            var loginInfor = localStorage.getItem('LoginInfor');
            this.LoginInfor = JSON.parse(loginInfor);
            console.log("个人登录信息");
            console.log(this.LoginInfor);
            if (this.LoginInfor == null) {
                this.LoginInfor = {
                    SectionName: "",
                    UserName: ""
                }
            }
            this.getZZJGList();
            this.getDrugList();
        }
    };
</script>
<style lang="scss">
    .NumbeRFMaintenMZYPGL {
        .selectTime {
            .el-input__icon {
                height: 100%;
                width: 25px;
                display: none;
                text-align: center;
                -webkit-transition: all .3s;
                transition: all .3s;
                line-height: 40px;
            }

            .input {
                width: 90px !important;
                height: 28px !important;
            }


        }

        .Dilog {
            .column2 {
                width: 1116px;
                margin: 50px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .form-control {
                width: 96px !important;
            }
        }

        .div_P {
            .form-control {
                display: inline-block;
                width: 12rem;
                height: 32px;
                padding: 5px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            }

            .form-group {
                height: 45px;
                margin: 0;
                line-height: 32px;
                padding: 6px 15px 0 15px;
            }
        }

        .elRadioYygh {
            .column2 label {
                width: 52px !important;
            }

            .el-radio-button__inner {

                padding: 6px 11px;

            }
        }

        .fjtable {
            .el-table {
                font-size: 10px !important;
            }
        }

        .cardP {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardPdd {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }

            .el-card__body {
                padding: 2px;
            }
        }

        .cardPD {
            .text {
                font-size: 12px;
            }

            .el-card__header {
                padding: 8px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardC {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 10px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: white;
            }

            .el-card__body {
                padding: 8px;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }


        .el-tree-node.is-current > .el-tree-node__content {
            color: #fff;
            background: #155a00 !important;
        }

        .dRightMain {
            padding: 18px;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-table {
            font-size: 14px !important;
        }

        .el-table thead {
            color: #303133;
        }

        .dRightMain .Tb {
            position: absolute;
            top: 91px;
            left: 240px;
            right: 15px;
            bottom: 0;
            border: 1px solid #ddd;
        }
    }

</style>
